import { Icon } from '@/components/Icon';
import Homepage from '@/pages/Homepage';
import Userpage from '@/pages/Userpage';
import { AppThemeType } from '@/theme';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useTheme } from '@shopify/restyle';
import { Text } from 'react-native';



const Tab = createBottomTabNavigator();
const tabItems: { name: string; title?: string; label: string; component: () => JSX.Element }[] = [
  {
    name: 'Homepage',
    component: Homepage,
    label: '首页',
    title: '首页',
  },
  {
    name: 'Userpage',
    component: Userpage,
    label: '我的',
    title: '我的',
  },
];

export const TabStack = () => {
  const theme = useTheme<AppThemeType>();
  return (
    <Tab.Navigator
      initialRouteName="Homepage"
      screenOptions={{
        // 懒加载TabScreen
        lazy: true,
        headerTitleAlign: 'center',
        // 不显示TabScreen的header
        headerShown: false,
        tabBarStyle: {
          paddingTop: 0,
          paddingBottom: 4
        },
      }}
    >
      {tabItems.map(item => (
        <Tab.Screen
          key={item.name}
          name={item.name}
          component={item.component}
          options={{
            title: item.title || item.label,
            tabBarLabel: ({ focused }) => (
              <Text
                style={{
                  color: focused ? theme.colors.gray : theme.colors.gray500,
                  fontSize: 12,
                }}
              >
                {item?.label}
              </Text>
            ),

            tabBarIcon: ({ focused, color, size }) => {
              let imgUrl = focused ? "home" : "home-outline";
              return (
                <Icon
                  type="ionicon"
                  name={imgUrl}
                // color={focused ? AppColor.MianColor : AppColor.ColorGrey}
                />
              )
            },
          }}
        />
      ))}
    </Tab.Navigator>
  );
};
